浅谈localStorage的性能

您所在的位置：网站首页 › localstorage最大容量 chrome › 浅谈localStorage的性能

浅谈localStorage的性能

2024-07-13 08:23| 来源: 网络整理| 查看: 265

浅谈localStorage的性能

如果说2012年的web开发世界有什么大事的话，人们印象最深的恐怕就是localStorage的性能了，这场争论开始于Christian Heilmann写的一篇文章： There is no simple solution for localStorage（中文版：本地存储并不简单）。在这篇文章里，他得出了几个关于localStorage性能差的几个论断。除此之外，他还建议对现有api进行改变以及对于可选api（IndexedDB、webSQL）的优化。

首先来几篇文章压压惊

中文存储不简单

作者：Christian Heilmann

localStorage, perhaps not so harmful

作者： John Allsopp 文章：分析了通过localStorage读写10KB的数据的时间

PSA: DOM localStorage considered harmful

localStorage的运行解析（转）localStorage的关键问题在于它是通过同步操作的方式来进行文件I/o操作。写入localStorage的数据都会保存到磁盘上，除非主动删除数据，否则数据是永远不会过期的。用过nodeJs的人都知道，对于文件的I/O是非常昂贵和不一致的（不可信赖）。任何时间点任何的程序都可以访问文件。举例来说，你注意到过当一个杀毒软件运行的时候你的电脑是如何慢下来的吗？在理想状态下，你读取的文件不会有其他程序在同一时间访问该文件。在极端坏的情况下，如果你想读取一个文件，就必须等待文件上的锁被释放（其他程序操作文件时会锁定文件）。关于localStorage的性能测试（结合日常需求）

结合日常工作中的使用，粗略的分析了一下一个数据分批次与整体存入和读取的时候效率与性能差异

CateDta存储的是一个类目数组文件大小在1M左右, 数组长度为40

量级为10的存储性能差异代码语言：javascript复制 // 存储之前首先清空上一次的数据 window.localStorage.clear() const CateDta = getAllData().data let n = 10; let time1 = new Date().getTime() // 数组长度为50 CateDta.forEach((item,index)=>{ window.localStorage.setItem('index'+index,JSON.stringify(item)) }) let time2 = new Date().getTime() console.log(time2-time1); let time3 = new Date().getTime() window.localStorage.setItem('total',JSON.stringify(CateDta)) let time4 = new Date().getTime() console.log(time4-time3);

在谷歌上面测试了十组结果得出结果：

分批次的存入时候平均值是9.2ms整体存入的话 7.2msmac自带的浏览器中 safari浏览器平均值更小（单就localStorage而言比谷歌的存储要快）量级为10的时候读取性能代码语言：javascript复制 window.localStorage.clear() console.log(JSON.stringify(window.localStorage)); const CateDta = getAllData().data window.localStorage.setItem('total',JSON.stringify(CateDta)) let item = CateDta[0] for(var i=0;i

【本文地址】

浅谈localStorage的性能

浅谈localStorage的性能

今日新闻

推荐新闻